<!-- components/ImageModal.vue -->
<template>
	<div class="bigImgComponent" @click="bigImgclick()">
		<movable-area>
			<movable-view direction="none" scale-value="1" scale-min="1" scale="true" scale-max="4">
				<img :src="imgVal" alt="">
			</movable-view>
		</movable-area>
	</div>
</template>

<script>
	import {
		studentUpdate
	} from '@/api.js'
	export default {
		props: {
			imgVal: {
				type: String,
			},
		},

		data() {
			return {

			}
		},

		methods: {
			bigImgclick() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.bigImgComponent {
		width: 100%;
		overflow: hidden;
		height: 100vh;
		top: auto;
		position: absolute;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7); //灰色背景

		img {
			width: 100%;
			height: 100%;
		}
	}

	//movable-area需要设置宽高
	movable-area {
		width: 100%;
		height: 100%;
		top: auto;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 9999;

		movable-view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;

			img {
				width: 86% !important;

				height: auto !important;
				max-height: 90% !important;
			}
		}
	}
</style>